<template>
  <div class="goods-add">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>

    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
      <el-step title="步骤 4"></el-step>
      <el-step title="步骤 5"></el-step>
    </el-steps>

    <el-tabs tab-position="left" style="height: 500px;" type="border-card" @tab-click="handleTabClick">
     <el-tab-pane label="基本信息">
      <div class="amap-wrapper">
        <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
      </div>
     </el-tab-pane>
     <el-tab-pane label="商品参数">商品参数</el-tab-pane>
     <el-tab-pane label="商品属性">商品属性</el-tab-pane>
     <el-tab-pane label="商品图片">
      <!--
        action属性用来设置图片上传的地址
        on-preview属性用来触发预览图片执行的函数
        on-remove属性用来触发删除图片执行的函数
       -->
       <!-- el-upload组件内部封装了自己的ajax，它不会利用axios去发送请求，也就不会经过axios的拦截器，所以那个请求头也就设置不上去了。解决方式利用headers属性设置请求头 -->
      <el-upload
        action="http://localhost:8888/api/private/v1/upload"
        :headers="myheaders"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-upload="handleBeforeUpload"
        :on-success="handleSuccess"
        :file-list="fileList2"
        list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">图片不超过500kb</div>
      </el-upload>
     </el-tab-pane>
    <el-tab-pane label="商品内容">
      <quill-editor
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)">
      </quill-editor>
    </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data () {
    return {
      active: 0,
      fileList2: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
      myheaders: {
        Authorization: localStorage.getItem('mytoken')
      },
      content: null,
      editorOption: {
      }
    }
  },
  methods: {
    handleTabClick (obj) {
      this.active = parseInt(obj.index)
    },
    // 移除
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // 预览
    handlePreview (file) {
      console.log(file)
    },
    // 上传之前
    handleBeforeUpload (file) {
      console.log('file: ', file)
      // file.size文件大小的单位是字节。 1kb = 1024B
      if (file.size > 500 * 1024) {
        this.$message.error('文件的大小不能超过500kb')
        return false
      }
    },
    handleSuccess (response, file, fileList) {
      if (response.meta.status === 200) {
        this.$message.success('上传图片成功！')
      }
    },
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady (quill) {
      console.log('editor ready!', quill)
    }
  }
}
</script>
<style lang="scss" scoped>
.goods-add {
  .el-tabs {
    height: 400px;
  }
  .amap-wrapper {
  width: 700px;
  height: 700px;
  }
}
.quill-editor {
  height: 400px;
  .ql-container {
    height: 300px;
  }
}
</style>
